<template>
  <div class="footer-wrapper">
    <div
      class="footer-web"
      :style="{ display: pageDispaly.web_display ? 'block' : 'none' }"
    >
      <el-row :gutter="0" class="footer-top">
        <el-col :span="20" :offset="0">
          <div class="service-information">
            <div
              class="service-point"
              v-for="service of serviceInfoList"
              :key="service.id"
            >
              <dl>
                <dt class="service-title">{{ service.title }}</dt>
                <dd
                  class="service-content"
                  v-for="(item, index) in service.list"
                  :key="index"
                >
                  <a
                    :href="item.target"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    {{ item.name }}
                  </a>
                </dd>
              </dl>
            </div>
          </div>
        </el-col>
        <el-col :span="4" :offset="0">
          <div class="online-service">
            <p class="iphone">400-100-5678</p>
            <p class="instruction">8:000-18:00（仅收市话费）</p>
            <a href="">
              <button class="service-button">在线客服</button>
            </a>
          </div>
          <div class="online-service" style="margin-top: 10px">
            <p class="iphone">400-180-8888</p>
            <p class="instruction">8:00-18:00（仅收市话费） </p>
            <p class="instruction">适用于：MIX FOLD、巨屏电视系列</p>
            <a href="">
              <button class="service-button">在线客服</button>
            </a>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="0" class="footer-bottom">
        <el-col class="container" :span="22" :offset="2">
          <div class="info-logo">
            <img
              style="width: 56px; height: 56px; margin-right: 16px"
              src="https://cdn.cnbj1.fds.api.mi-img.com/s02.mifile.cn/assets/static/image/logo-mi2.png"
              alt="mi-logo"
              loading="lazy"
            />
          </div>
          <div class="info-text">
            <ul class="site-info">
              <li v-for="site of siteInfoList1" :key="site.id">
                <a v-bind:href="site.target" target="__blank">
                  <span class="site-item">{{ site.name }}</span>
                </a>
                <span class="sep" v-show="site.sep !== false">|</span>
              </li>
            </ul>
            <ul class="site-info">
              <li v-for="site of siteInfoList2" :key="site.id">
                <a v-bind:href="site.target" target="__blank">
                  <span class="site-item">{{ site.name }}</span>
                </a>
                <span class="sep" v-show="site.sep !== false">|</span>
              </li>
            </ul>
            <p class="copyright">
              <span> © mi.com 京ICP证110507号 京ICP备10046444号</span>
              <span>京公网安备11010802020134号 京网文[2020]0276-042号</span
              ><br />
              <span
                >（京）网械平台备字（2018）第00005号
                互联网药品信息服务资格证</span
              >
              <span>(京)-非经营性-2014-0090 营业执照 医疗器械质量公告</span
              ><br />
              <span>
                增值电信业务许可证 网络食品经营备案 京食药网食备202010048</span
              >
              <span> 食品经营许可证</span><br />
              <span>
                违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉
                本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</span
              >
            </p>
            <p class="logo-list">
              <a
                v-for="image in imageList"
                :key="image.id"
                :href="image.target"
                target="__blank"
              >
                <img
                  class="mi-logo"
                  :src="image.source"
                  alt="logo"
                  loading="lazy"
                />
              </a>
            </p>
            <div class="slogan ir"></div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div
      class="footer-mobile"
      :style="{ display: pageDispaly.mobile_display ? 'block' : 'none' }"
    >
      <el-row :gutter="0">
        <el-col :span="24" class="mi-footer">
          <a
            :href="getFullPath('/#/about')"
            class="mi-footer-link"
            target="_self"
          >
            <div>了解小米 </div>
            <el-icon style="margin-left: 5px" :size="16"
              ><ArrowRight
            /></el-icon>
          </a>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { reactive, onMounted } from "vue";
  import {
    ServiceInfoType,
    SiteInfoType,
    ImageListType,
  } from "./../types/Global/index";
  import { getFullPath } from "@/utils/path";
  const serviceInfoList = reactive<ServiceInfoType[]>([
    {
      id: 1,
      title: "选购指南",
      list: [
        {
          name: "手机",
          target: "https://www.mi.com/shop/search?keyword=手机",
        },
        {
          name: "电视",
          target: "https://www.mi.com/shop/search?keyword=电视",
        },
        {
          name: "笔记本",
          target: "https://www.mi.com/shop/search?keyword=笔记本",
        },
        {
          name: "平板",
          target: "https://www.mi.com/shop/search?keyword=平板",
        },
        {
          name: "穿戴",
          target: "https://www.mi.com/shop/search?keyword=穿戴",
        },
        {
          name: "耳机",
          target: "https://www.mi.com/shop/search?keyword=耳机",
        },
        {
          name: "家电",
          target: "https://www.mi.com/shop/search?keyword=家电",
        },
        {
          name: "路由器",
          target: "https://www.mi.com/shop/search?keyword=路由器",
        },
        {
          name: "音箱",
          target: "https://www.mi.com/shop/search?keyword=音箱",
        },
        {
          name: "配件",
          target: "https://www.mi.com/shop/search?keyword=配件",
        },
      ],
    },
    {
      id: 2,
      title: "服务中心",
      list: [
        {
          name: "申请售后",
          target: "https://www.mi.com/service/aftersale/front",
        },
        {
          name: "售后政策",
          target: "https://www.mi.com/service/exchange#phone",
        },
        {
          name: "维修服务价格",
          target: "https://www.mi.com/service/materialprice",
        },
        {
          name: "订单查询",
          target: "https://www.mi.com/user/orderList",
        },
        {
          name: "以旧换新",
          target: "https://www.mi.com/a/h/16769.html",
        },
        {
          name: "保障服务",
          target:
            "https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search",
        },
        {
          name: "防伪查询",
          target: "https://www.mi.com/service/imei",
        },
        {
          name: "F码通道",
          target: "https://www.mi.com/shop/order/fcode",
        },
      ],
    },
    {
      id: 3,
      title: "线下门店",
      list: [
        {
          name: "小米之家",
          target: "https://www.mi.com/service/mihome/list/",
        },
        {
          name: "服务网点",
          target: "https://www.mi.com/service/sitelist",
        },
        {
          name: "授权体验店专区",
          target: "https://www.mi.com/service/family-location",
        },
      ],
    },
    {
      id: 4,
      title: "关于小米",
      list: [
        {
          name: "了解小米",
          target: "https://www.mi.com/about/",
        },
        {
          name: "加入小米",
          target: "https://hr.xiaomi.com/",
        },
        {
          name: "投资者关系",
          target: "https://company.mi.com/zh-cn/ir/index.html",
        },
        {
          name: "企业社会责任",
          target: "https://www.mi.com/csr/",
        },
        {
          name: "廉洁举报",
          target: "https://www.mi.com/intl/contest/rules/?id=41",
        },
      ],
    },
    {
      id: 5,
      title: "关注我们",
      list: [
        {
          name: "新浪微博",
          target: "https://weibo.com/xiaomishangcheng",
        },
        {
          name: "官方微信",
          target: "https://www.mi.com/weixin/",
        },
        {
          name: "联系我们",
          target: "https://www.mi.com/about/contact/",
        },
        {
          name: "公益基金会",
          target: "https://www.mi.com/foundation/index.html",
        },
      ],
    },
  ]);

  const siteInfoList1 = reactive<SiteInfoType[]>([
    {
      id: 1,
      name: "小米商城",
      target: "/#/shop",
      sep: true,
    },
    {
      id: 2,
      name: "小米澎湃",
      target: "/#/Hyperos",
      sep: true,
    },
    {
      id: 3,
      name: "米家",
      target: "https://home.mi.com/index.html",
      sep: true,
    },
    {
      id: 4,
      name: "多看",
      target: "https://www.duokan.com/pc/",
      sep: true,
    },
    {
      id: 5,
      name: "游戏",
      target: "https://game.xiaomi.com/",
      sep: true,
    },
    {
      id: 6,
      name: "音乐",
      target: "https://www.mi.com/music",
      sep: true,
    },
    {
      id: 7,
      name: "政企服务",
      target: "https://b.mi.com/?client_id=180100031058&masid=17409.0358",
      sep: true,
    },
    {
      id: 8,
      name: "小米天猫店",
      target: "https://xiaomi.tmall.com/shop/view_shop.htm",
      sep: true,
    },
    {
      id: 9,
      name: "小米集团隐私政策",
      target: "https://privacy.mi.com/all/zh_CN/",
      sep: true,
    },
    {
      id: 10,
      name: "小米公司儿童信息保护规则",
      target: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f516fe9e2c01.html",
      sep: true,
    },
    {
      id: 11,
      name: "小米商城隐私政策",
      target: "https://www.mi.com/shop",
      sep: true,
    },
    {
      id: 12,
      name: "小米商城用户协议",
      target: "https://www.mi.com/shop",
      sep: true,
    },
    {
      id: 13,
      name: "问题反馈",
      target: "https://www.mi.com/shop",
      sep: true,
    },
    {
      id: 14,
      name: "Select Location",
      target: "https://www.mi.com/shop",
      sep: false,
    },
  ]);

  const siteInfoList2 = reactive<SiteInfoType[]>([
    {
      id: 1,
      name: "北京互联网法院法律服务工作站",
      target: "https://www.mi.com/shop",
      sep: true,
    },
    {
      id: 2,
      name: "中国消费者协会",
      target: "https://www.mi.com/shop",
      sep: true,
    },
    {
      id: 3,
      name: "北京市消费者协会",
      target: "https://www.mi.com/shop",
      sep: false,
    },
  ]);

  const imageList = reactive<ImageListType[]>([
    {
      id: 1,
      source: "https://s01.mifile.cn/i/v-logo-2.png",
      target: "https://credit.cecdc.com/CX20120926001783002010.html",
    },
    {
      id: 2,
      source: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/icon3.png",
      target: "https://kx.xcc.cn/newCan/2021122904514041324",
    },
    {
      id: 3,
      source:
        "https://i8.mifile.cn/b2c-mimall-media/ba10428a4f9495ac310fd0b5e0cf8370.png",
      target: "https://www.mi.com/service/buy/commitment",
    },
    {
      id: 4,
      source:
        "https://cdn.cnbj1.fds.api.mi-img.com/b2c-misite-activity/f1ee261b96ae71e845efba398efeca02.png",
      target:
        "https://webcert.cnmstl.net/cert/grade?sn=3af21034e35011eab3ea00163e068ceb",
    },
  ]);

  let pageDispaly = reactive({
    web_display: true,
    mobile_display: false,
  });

  const computeClientWidth = () => {
    if (document.body.clientWidth > 1224) {
      pageDispaly.web_display = true;
      pageDispaly.mobile_display = false;
    } else {
      pageDispaly.web_display = false;
      pageDispaly.mobile_display = true;
    }
  };

  onMounted(() => {
    // 页面加载时，加载一次视口宽度
    computeClientWidth();

    window.addEventListener("resize", () => {
      computeClientWidth();
    });
  });
</script>

<style lang="scss" scoped>
  @use "@/styles/variable" as *;

  .footer-wrapper {
    width: 1440px;
    margin-right: auto;
    margin-left: auto;

    .footer-top {
      min-height: 350px;
      padding: 40px 0px;
      background: $bsWhite;

      .service-information {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-evenly;
        font-weight: 450;
        margin: 0px 50px 0px 200px;

        dt {
          margin: -1px 0 26px;
          font-size: 14px;
          line-height: 1.25;
          color: #424242;
        }

        dd {
          :hover {
            color: $themeColor !important;
          }

          a {
            text-decoration: none !important;
            color: #757575 !important;
            font-size: 12px;
          }
        }
      }

      .online-service {
        width: 220px;
        height: 75px;
        border-left: 1px solid #e0e0e0;
        text-align: left;
        padding: 0px 30px;
        font-family:
          MiSans,
          MI Lan Pro,
          serif;

        p {
          margin: 0 0 5px;
          font-size: 12px;
        }

        .instruction {
          color: #616161;
        }

        .iphone {
          font-size: 22px;
          line-height: 1;
          color: $themeColor;
        }

        .service-button {
          display: inline-block;
          width: 118px;
          height: 28px;
          font-size: 12px;
          line-height: 28px;
          cursor: pointer;
          border: 1px solid $themeColor;
          background: #fff;
          color: $themeColor;
        }
      }
    }

    .footer-bottom {
      min-height: 250px;
      background: #fafafa;
      padding: 30px 0;
      font-size: 12px;
    }

    .container {
      display: flex;
      flex-flow: row nowrap;
      justify-content: left;
    }

    .info-text {
      width: 100%;
      font-size: 13px;
      font-weight: 500;
      font-family:
        MiSans,
        MI Lan Pro,
        serif;
    }

    .site-info {
      display: flex;
      flex-flow: row nowrap;
      justify-content: left;
      align-items: top;

      & > li {
        list-style: none;
        text-decoration: none;

        :hover {
          color: $themeColor !important;
        }

        a {
          text-decoration: none;
        }
        .site-item {
          color: #757575;
        }

        .sep {
          margin: 0px 5px;
        }
      }
    }

    .copyright {
      color: $bsDark;
      font-size: 13px;
      font-weight: 500;
      font-family:
        MiSans,
        MI Lan Pro,
        serif;

      :hover {
        cursor: pointer;
        color: $themeColor !important;
      }
    }

    .mi-logo {
      width: 100px;
      height: 30px;
      margin: 10px 5px;
    }

    .slogan {
      margin: 30px auto 0;
      width: 100%;
      height: 20px;
      background: url(https://cdn.cnbj1.fds.api.mi-img.com/staticsfile/global/slogan2020.png)
        no-repeat center 0;
    }

    .footer-mobile {
      min-height: 100px;
    }

    .mi-footer {
      background: url(https://cdn.cnbj1.fds.api.mi-img.com/staticsfile/visual/index-m-footer-bg.png)
        no-repeat;
      background-size: 100% 100%;

      & a {
        min-height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      & > .mi-footer-link {
        text-decoration: none;
        font-size: 16px;
        font-family: MiSans, serif;
        font-weight: 500;
        flex-wrap: nowrap;
        white-space: nowrap;
        color: $bsBlack;
      }
    }
  }
</style>
